// 颜色
$primary: #409eff;
$secondary: #a855f7;

// 浅色模式
$text-primary: #1f2937;
$text-secondary: #666;
$background: linear-gradient(125deg, #e0f2ff 0%, #f0f5ff 20%, #f5f0ff 40%, #fff0f7 60%, #fff5f5 80%, #fff8f0 100%);
$surface: #ffffff;
$loading-bg: rgba(255, 255, 255, 0.95);
// 深色模式
$dark: (
  text-primary: #e2e8f0,
  text-secondary: #94a3b8,
  background: linear-gradient(90deg, rgba(47, 49, 51, 0.9), rgba(43, 42, 85, 0.9) 15%, rgba(39, 38, 123, 0.9) 30%, rgba(31, 32, 71, 0.9) 44%, rgba(30, 35, 84, 0.9) 58%, rgba(16, 52, 73, 0.9) 72%, rgba(7, 49, 55, 0.9) 86%, rgba(29, 46, 30, 0.9)),
  surface: #000c,
  loading-bg: rgba(18, 17, 17, 0.55),
  border: rgba(255, 255, 255, 0.1),
  card-bg: #1a1e24,                
  hover-bg: rgba(255, 255, 255, 0.05),
  input-bg: rgba(255, 255, 255, 0.05)
);

// 断点
$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;

// 间距
$spacing-base: 4px;
$spacing-xs: $spacing-base;
$spacing-sm: $spacing-base * 2;
$spacing-md: $spacing-base * 4;
$spacing-lg: $spacing-base * 6;
$spacing-xl: $spacing-base * 8;

// 圆角
$border-radius-sm: 4px;
$border-radius-md: 8px;
$border-radius-lg: 10px;

// 阴影
$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); 

@mixin image-fallback {
  position: relative;
  background: var(--hover-bg);

  &::before {
    content: '\f03e';
    font-family: 'Font Awesome 5 Free';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-secondary);
    font-size: 1.5em;
    opacity: 0.5;
  }

  &[src] {
    &::before {
      display: none;
    }
  }

  &:not([src]), &[src=""], &[src="null"], &[src="undefined"] {
    &::before {
      display: block;
    }
  }
} 
